<template>
  <div class="product">
    <bcd-top title='产品' englishtitle='PRODUCTS' />
    <div style="padding:10px 0px;box-sizing: border-box;">
      <el-menu
        v-if="catefgoryList && catefgoryList.length>0"
        default-active="-1"
        class="el-menu-demo"
        mode="horizontal"
        style="width:100%;display:flex;overflow-x:auto;margin-top:10px"
        :style="$store.getters.screenWidth ? 'padding:0 10px' : 'padding:0 40px;justify-content: center'"
        @select="handleSelect"
      >
        <el-menu-item
          style="height:35px;line-height:35px;text-align:center"
          :index="item.id.toString()"
          v-for="item in catefgoryList"
          :key="item.id"
        >{{item.cateName}}</el-menu-item>
      </el-menu>
      <div style="margin-bottom:20pxg;margin-top:10px;padding-bottom:20px">
        <el-input
          placeholder="请输入内容"
          v-model="input3"
          :style="$store.getters.screenWidth ? 'width:100%;padding:10px' : 'padding:10px 40px;width:60%;'"
        >
          <el-button slot="append" icon="el-icon-search" @click='search'></el-button>
        </el-input>
      </div>
      <!-- <div
        style="margin-top:30px;margin-bottom:20px;padding-bottom: 30px;"
        :style="$store.getters.screenWidth ? 'padding:0 10px' : 'padding:0 40px'"
      >
        <div
          class="product_kind"
          :style="$store.getters.screenWidth ? 'flex-direction: column;' :''"
        >
          <div class="pkind_left">颜色：</div>
          <div class="pkind_right">
            <div
              class="pkind_right_item"
              :style="active==index? 'color:#62a8ea' : ''"
              v-for="(item,index) in pkindItem"
              :key="index"
              @click="active=index"
            >{{item}}</div>
          </div>
        </div>
        <div
          class="product_kind"
          :style="$store.getters.screenWidth ? 'flex-direction: column;' :''"
        >
          <div class="pkind_left">型号：</div>
          <div class="pkind_right">
            <div
              class="pkind_right_item"
              :style="active1==index? 'color:#62a8ea' : ''"
              v-for="(item,index) in pkindItemType"
              :key="index"
              @click="active1=index"
            >{{item}}</div>
          </div>
        </div>
      </div>-->
      <transition name="el-zoom-in-center">
        <div
          class="product_main"
          :style="$store.getters.screenWidth ? 'padding:15px;justify-content: space-between;' : 'padding: 20px 60px;'"
          v-if="productlist && productlist.length>0"
        >
          <product-item
            :itemobj="item"
            v-for="(item,index) in productlist"
            :key="index"
            :isbig='false'
            style="margin-bottom:10px"
           v-show="item.isShow"
          ></product-item>
        </div>
      </transition>
      <transition name="el-zoom-in-center">
        <div
          v-if="!productlist || productlist.length==0"
          style="width:100%; background-color: #f2f2f2;"
        >
          <img src="../assets/empty.jpg" style="width:25%" alt />
        </div>
      </transition>

      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next,jumper"
          :total="total"
          :page-size="12"
          v-if="totla/12>1"
        ></el-pagination>
      </div>
    </div>
        <footer-part></footer-part>

  </div>
</template>
<script>
import footerPart from "../views/footer";
import { productcateglory, productFind } from "../api/api";
import productItem from "../components/productItem";
import bcdTop from "../components/bcdTop";

export default {
  data() {
    return {
      total: 10,
      input3: "",
      activeName: "second",
      pkindItem: ["全部", "黄色", "绿色", "白色", "深蓝色"],
      active: "0",
      active1: "0",
      pkindItemType: ["全部", "充电型", "大家电", "满减活动"],
      productlist: [
        {
          name: "小米机器人",
          id: "1",
          url: ""
        },
        {
          name: "小米机器人",
          id: "1",
          url: ""
        },
        {
          name: "小米机器人",
          id: "1",
          url: ""
        }
      ],
      catefgoryList: [],
      cateArr:[],
      activeIndex: "0"
    };
  },
  components: {
    productItem,
    footerPart,
    bcdTop
  },
  mounted() {
    this.getproductcateglory();
    this.getproductFind(0);
    // console.log("0000000000000000000",this.$route.query.code)
    // alert(this.$route.query.code)
  },
  methods: {
    handleSelect(index) {
      console.log(index);
      if (index == -1) {
        this.getproductFind(0, []);
        return;
      }
      let array = [];
      array.push(index);
      this.cateArr = array
      this.getproductFind(0, this.cateArr ,this.input3);
    },
    async getproductcateglory() {
      let res = await productcateglory({
        pageNo: 0,
        pageSize: 0,
        pageType: "A"
      });
      this.catefgoryList = res.data.data;
      this.catefgoryList.unshift({
        cateName: "全部",
        id: '-1'
      });
      console.log("999", this.catefgoryList);
    },
    search(){
     this.getproductFind(0, this.cateArr ,this.input3);
    },
    async getproductFind(val, cates,storename) {
      let res = await productFind({
        pageNo: val,
        pageSize: 12,
        cateIds: cates,
        pageType: "P",
        storeName:storename
      });
      this.productlist = res.data.data;
      this.total = res.data.count;
      console.log("888", res);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getproductFind(val - 1,this.cateArr ,this.input3);
    }
  }
};
</script>>
<style lang='scss'>
.product {
  .el-menu--horizontal > .el-menu-item.is-active {
    background: rgb(64, 158, 255);
    color: rgb(255, 255, 255) !important;
    font-size: 16px;
    border-radius: 5px;
  }
  cursor: pointer;
  .el-tabs__nav-wrap::after {
    width: 0 !important;
    border: none;
  }
  .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
  }
  .el-input-group {
    width: 54%;
  }
  .el-tabs__item {
    font-size: 16px;
  }
  .el-tabs__active-bar {
    height: 0;
  }

  .product_kind {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    font-size: 14px;
    .pkind_left {
      padding: 10px 20px;
      background-color: #e5e5e5;
      text-align: left;
    }
    .pkind_right {
      flex: 1;
      background-color: #fff;
      border: 1px solid #eee;
      border-left: none;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      .pkind_right_item {
        margin-right: 20px;
      }
    }
  }
  .product_main {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #f2f2f2;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
}
.pagination {
  width: 100%;
  margin: 0 auto;
  padding: 10px 50px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  background-color: #f2f2f2;
}
</style>